<template>
  <div class="HomeBanner">
    <banner :imgList="imgList" indiPosition="none">
      <template slot="content" slot-scope="data">
        <img
          class="image-item"
          :src="data.data.item.picUrl"
          alt=""
          @click="goImgDetail(data.data.item)"
        />
      </template>
      <div class="creditCard">
        <div class="message">
          <i class="el-icon-chat-dot-round"></i>
          <span>new</span>
          关于国家开发银行2019年第七期及第八期金融债券柜台市场续发行的销售通告
          <p style="float: right;">
            更多
            <i class="el-icon-arrow-right"></i>
          </p>
        </div>
        <ul class="CreditCardFunctionList">
          <li class="li-item" @click="toCreditIndex">
            <i class="el-icon-s-order"></i>
            <div class="applict-credit">
              <p>信用卡申请</p>
              <span>账单分期快速申请</span>
            </div>
          </li>
          <li class="li-item">
            <i class="el-icon-s-platform"></i>
            <div>
              <p>办卡进度查询</p>
              <span>办卡进度实时了解</span>
            </div>
          </li>
          <li class="li-item">
            <i class="el-icon-s-management"></i>
            <div>
              <p>信用卡启用</p>
              <span>信用卡启用文案</span>
            </div>
          </li>
          <li class="li-item">
            <i class="el-icon-s-marketing"></i>
            <div>
              <p>积分商城</p>
              <span>积分商城文案</span>
            </div>
          </li>
        </ul>
      </div>
    </banner>
  </div>
</template>

<script>
import Banner from "../components/Banner";

export default {
  name: "HomeBanner",
  components: {
    Banner
  },
  data() {
    return {
      imgList: []
    };
  },
  methods: {
    goImgDetail(obj) {
      window.sa.track("$CollecBannerClick", {
        $element_content: obj.id
      });
      window.location.href = obj.picLink;
    },
    toCreditIndex() {
      this.$router.push({
        name: "CreditDisplay",
        params: { isHeader: false }
      });
    }
  },
  created() {
    let transactionCode = "/runtime/pocbanner/selectPocBannerList.action";
    let params = {
      isPublish: "1",
      picType: "2"
    };
    this.$remote(transactionCode, params).then(data => {
      this.imgList = data;
    });
  },
  watch: {
    imgList: {
      deep: true,
      handler(arr) {
        window.sa.track("$pageview", {
          $url_path: "index",
          $element_content: arr[0].id
        });
      }
    }
  }
};
</script>

<style scoped lang="stylus">
.HomeBanner
    .Banner
        position relative
        .creditCard
            position absolute
            left 0
            bottom 0
            right 0
            height 150px
            z-index 300
            .message
                padding 0 10%
                line-height 30px
                color #fff
                background rgba(0, 0, 0, .3)
                font-size 12px
                i
                    font-size 18px
                    position relative
                    top 3px
                span
                    margin 0 5px 0 5px
                    border 1px solid #fff
                    padding 1px 5px
                    border-radius 10px
            .CreditCardFunctionList
                background rgba(255, 255, 255, .5)
                height calc(100% - 30px)
                padding 0 10%
                overflow hidden
                li
                    cursor pointer
                    overflow hidden
                    width 25%
                    float left
                    padding-top 40px
                    i
                        font-size 44px
                        float left
                        color #517fff
                        margin-left 10px
                    div
                        float left
                        span
                            font-size 12px
                            color #545454
</style>
